<template>
	<view class="content">
		<bulletin-list :options="items"  />
		<uni-load-more :status="moreStatus" />
	</view>
</template>

<script>
	import bulletinList from '@/components/bulletin-list/bulletin-list.vue'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue'
	
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	
	export default {
		computed: {
		    ...mapState(['token'])
		},
		components: {
			bulletinList,
			uniLoadMore
		},
		onLoad(){
			this.getlist()
		},
		data() {
			return {
				items: [],
				page: 1,
				pageCount: 0,		// 总页数
				moreStatus: 'more',
				loadingStatus: true,
				statusTypes: [{
					value: 'more',
					text: '加载前',
					checked: true
				}, {
					value: 'loading',
					text: '加载中',
					checked: false
				}, {
					value: 'noMore',
					text: '没有更多',
					checked: false
				}]
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			getlist() {
				let _this = this
				if(!this.loadingStatus){	//防止重复请求
					return !1
				}
				//
				this.loadingStatus = false
				this.moreStatus = 'loading'
				this.vuexRequest({
					url: '/api/addons/execute?route=article-bulletin/index&addon=rf-article',
					method: 'GET',
					data: {page:this.page,'per-page': 20},
					success: (res)  => {
						_this.loadingStatus = true
						// 
						if(_this.page == 1){
							_this.items = res.data.data.list
						}else{
							_this.items = _this.items.concat(res.data.data.list)
						}						
						
						// 分页信息
						_this.page++
						_this.pageCount = res.data.data.pageInfo.pageCount
						// 判断分页
						if(_this.page > _this.pageCount){
							_this.moreStatus = 'noMore'
						}else{
							_this.moreStatus = 'more'
							this.loadingStatus = true
						}
					},
					fail: (err)  => {
					},
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getlist()
			// 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		onReachBottom() {
			if(this.loadingStatus &&  this.pageCount > this.page ){	//防止重复请求
				this.getlist()
			}else{
				this.moreStatus = 'noMore'
			}
		}
	}
</script>

<style>

</style>
